<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="土购网,电商,农产品">
  <meta name="description" content="这是一个关于农产品的电商网站。">
  <title>土购网</title>
  <link rel="shortcut icon" href="./res/images/logo.png" type="image/png">
  <!-- 引入样式文件 -->
  <!-- <link rel="stylesheet" href="./dist/css/app.css"> -->
  <link rel="stylesheet" href="./node_modules/_swiper@6.3.2@swiper/swiper-bundle.css">
  <link rel="stylesheet/less" href="./style/reset.less">
  <link rel="stylesheet/less" href="./style/app.less">
  <link rel="stylesheet/less" href="./style/login.less">
  <link rel="stylesheet/less" href="./style/nav.less">
  <link rel="stylesheet/less" href="./style/category.less">
  <link rel="stylesheet/less" href="./style/goods.less">
  <!-- 引入编译less的文件 -->
  <script src="./node_modules/_less@3.12.2@less/dist/less.js"></script>
</head>
<body>
  <!-- 头部 -->
  <header>
    <!-- 顶部信息 -->
    <div class="top-nav">
      <div class="container clearfix">
        <ul class="left-nav left">
          <li><a href="index.html">您好！欢迎来到土购网菜市场！</a></li>
          <li class="login" data-type="login"><a href="" data-type="login">请登录</a></li>
          <li class="register" data-type="register"><a href="" data-type="register">免费注册</a></li>
        </ul>
        <ul class="right-nav right">
          <li><a href="">购物车</a></li>
          <li><a href="">服务热线：<span>8004001234</span></a></li>
        </ul>
      </div>
    </div>
    <!-- 搜索 -->
    <div class="top-search-container">
      <div class="container clearfix">
        <!-- logo -->
        <a href="index.html" class="left-icon left">
          <img src="res/images/logo.png" alt="logo" />
        </a>
        <!-- 搜索 -->
        <div class="search left">
          <input type="search">
          <button class="btnsearch">搜索</button>
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <nav class="top_sub_nav_container">
      <div class="nav_container"></div>
    </nav>
    <!-- 轮播图 -->
    <nav class="top-banner-container">
      <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img width="100%" height="400" src="https://seopic.699pic.com/photo/50112/1369.jpg_wh1200.jpg" alt="banner">
            </div>
            <div class="swiper-slide">
              <img width="100%" height="400" src="https://img95.699pic.com/photo/50112/0715.jpg_wh860.jpg" alt="banner">
            </div>
            <div class="swiper-slide">
              <img width="100%" height="400" src="https://pic.616pic.com/ys_bnew_img/00/32/57/SQN3sI9hqw.jpg" alt="banner">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 分类导航 -->
        <div class="category-nav"></div>
    </div>
  </nav>
  </header>
  <!-- 主体部分 -->
  <main>
    <div class="main-container"></div>
  </main>
  <!-- 尾部 -->
  <footer></footer>
</body>
<script src="./node_modules/_jquery@3.5.1@jquery/dist/jquery.js"></script>
<script src="./node_modules/_swiper@6.3.2@swiper/swiper-bundle.js"></script>
<script src="./js/login.js"></script>
<script src="./js/nav.js"></script>
<script src="./js/category.js"></script>
<script src="./js/goods.js"></script>
<script src="./js/app.js"></script>
</html>